<template>
  <div>
    <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft">
      <template #right>
        <i
          class="iconfont icon-shanchu"
          style="font-size: 3.5rem; color: #a36663"
          @click="handleDel"
        ></i>
      </template>
    </van-nav-bar>
    <!-- 空状态 -->
    <van-empty description="这里什么都没有哦" v-if="!cartList.length">
      <van-button round to="/category" class="empty">再去逛逛吧~</van-button>
    </van-empty>
    <!-- 购物车单项 -->
    <div class="cart-item" v-for="(item, index) in cartList" :key="item.id">
      <div class="left">
        <img class="cart-img" :src="item.pc_cover" alt="" />
      </div>
      <div class="right">
        <!-- 上 -->
        <div class="top">
          <div>
            <p>{{ item.product_name }}</p>
            <p>规格： {{ item.product_spec_name }}</p>
          </div>
          <div class="check-icon" @click="handleCheck(index)">
            <i class="iconfont icon-31xuanzhong" v-if="item.isCheck"></i>
            <i class="iconfont icon-yuanxingweixuanzhong" v-else></i>
          </div>
        </div>
        <!-- 下 -->
        <div class="bottom">
          <p>￥{{ item.product_price }}</p>
          <div>
            <!-- 此处直接修改的是状态机的数据，数据库无法保持同步 -->
            <van-stepper v-model="item.product_quantity" color="#a36663" />
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车单项end -->
    <!-- 提交订单 -->
    <van-submit-bar
      :price="allInfo.checkPrice"
      button-text="提交订单"
      button-color="#a36663"
      @submit="onSubmit"
    >
      <div class="check-icon" @click="handleAllCheck(allInfo.allCheck)">
        <i class="iconfont icon-31xuanzhong" v-if="allInfo.allCheck"></i>
        <i class="iconfont icon-yuanxingweixuanzhong" v-else></i>
        <span class="p-l-30">全选</span>
      </div>
    </van-submit-bar>
  </div>
</template>

<script setup>
import { Toast } from "vant";
import { computed, reactive, ref } from "@vue/runtime-core";
import request from "../utils/request.js";
import { useStore } from "vuex";
import router from "../router";
import { userCartDel } from "../api/cart.js";

let store = useStore();

let onClickLeft = () => {
  router.push("/category");
};
let cartList = computed(() => {
  return store.state.cart.cartList;
});

let allInfo = computed(() => {
  return store.getters["cart/allInfo"];
});
// 进入购物车页加载购物车数据初始化购物车
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
if (userInfo) {
  store.dispatch("cart/cartInitAct", userInfo);
}
//控制单选
let handleCheck = (index) => {
  console.log("触发");
  store.commit("cart/cartCheckMut", index);
};
//全选控制单选---通过改变全部的单选状态实现
let handleAllCheck = (bool) => {
  store.commit("cart/cartAllCheckMut", bool);
};
// 删除购物车，基于筛选勾选状态的商品id和唯一的用户id实现
let handleDel = () => {
  console.log(cartList.value);
  if (cartList.value.length) {
    let checkedTotal = cartList.value.filter((item) => {
      return item.isCheck == true;
    });
    console.log(store.state.cart.cartList);
    // console.log(checkedTotal);
    checkedTotal.forEach((checkedItem) => {
      //得到勾选商品的id和用户id
      let { userid, id } = checkedItem;
      // 请求
      store.dispatch("cart/cartDelAct", {
        userid,
        id,
      });
    });
  }
};

let onSubmit = () => Toast("点击按钮");
</script>

<style lang="less" scoped>
:deep(.van-nav-bar .van-icon),
:deep(.van-nav-bar__title) {
  color: #a36663;
}
:deep(.van-submit-bar) {
  padding: 0 2rem 0 2rem;
  box-sizing: border-box;
}
:deep(.van-checkbox__icon--checked .van-icon) {
  background: #a36663;
  border-color: #a36663;
}
:deep(.van-submit-bar__price) {
  color: #a36663;
}
.cart-item {
  height: 22rem;
  width: 100%;
  box-shadow: 1px 1px 8px 0px #e2e2e2;
  color: #a36663;
  display: flex;
  align-items: center;
  padding: 0 2rem 0 2rem;
  box-sizing: border-box;
  font-size: 2.2rem;
  .left {
    width: 30%;
    .cart-img {
      width: 19.5rem;
      height: 19.5rem;
      margin-right: 1rem;
    }
  }
  .right {
    width: 70%;
    .top {
      height: 13rem;
      display: flex;
      justify-content: space-between;
      p {
        margin-top: 3.8rem;
      }
      .check-icon {
        padding-top: 5.5rem;
      }
    }
    .bottom {
      height: 8rem;
      display: flex;
      justify-content: space-between;
      margin-top: 2rem;
      p {
        padding-top: 2.7rem;
      }
    }
  }

  .check-icon {
    margin-bottom: 4.2rem;
    text-align: end;
    i {
      font-size: 4rem;
    }
  }
}
.van-submit-bar__bar .check-icon {
  //全选图标
  i {
    font-size: 4rem;
    color: #a36663;
  }
}
// 空状态按钮
.van-button--normal {
  background: #a36663;
  color: #fff;
}
</style>
